import React, { useState } from 'react';

function ColourCell(props) {
    const { color } = props;    
    return <span style={{ backgroundColor: color, width: 40, height: 16,display:'inline-block'}}>

    </span>
}

export default function (basicColumns) {
    const [columns] = useState(() => {
        let v = [];
        basicColumns.forEach((item) => {
            let fixed, width = 100,render;
            if (['name'].includes(item.key)) fixed = 'left';
            if (['colour','computed'].includes(item.key)) fixed = 'right'
            if (['pan','computed'].includes(item.key)) width = 200;
            if(item.key === 'colour') render = (value,row,index)=>{return <ColourCell color={value}/>}
            v.push({ ...item, width, fixed,render });
        })
        return v;
    });    
    return columns;
}